import React from 'react';
import { DocsThemeConfig, useConfig } from 'nextra-theme-docs';
import { useRouter } from 'next/router';
import { tw } from 'typewind';

const config: DocsThemeConfig = {
  logo: (
    <span
      className={
        tw.text_base.md(tw.text_lg).mx_2.font_extrabold.inline.select_none
      }
      style={{ fontFamily: 'IBM Plex Mono, monospace' }}
    >
      type
      <span
        className={
          tw.underline.decoration_wavy.decoration_red_500.text_white
            .underline_offset_4
        }
      >
        wind
      </span>
    </span>
  ),
  project: {
    link: 'https://github.com/mokshit06/typewind',
  },
  useNextSeoProps() {
    const { route } = useRouter();

    if (route === '/')
      return {
        titleTemplate: 'Typewind – %s',
      };

    return {
      titleTemplate: '%s – Typewind',
    };
  },
  docsRepositoryBase: 'https://github.com/mokshit06/typewind/blob/main/site',
  footer: {
    text: (
      <div className="flex justify-between gap-x-4 w-full">
        <div className="flex-start">
          MIT 2023 ©{' '}
          <a
            style={{ textDecoration: 'none' }}
            className="text-current"
            href="https://mokshitjain.co"
          >
            Mokshit Jain
          </a>
          .
        </div>
        <a
          href="https://vercel.com/?utm_source=typewind"
          target="_blank"
          rel="noopener"
          className="inline-flex items-center no-underline text-current font-semibold flex-end"
        >
          <span className="mr-1">Powered by</span>
          <span>
            <svg height={20} viewBox="0 0 283 64" fill="none">
              <path
                fill="currentColor"
                d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z"
              />
            </svg>
          </span>
        </a>
      </div>
    ),
  },
  darkMode: false,
  nextThemes: {
    defaultTheme: 'dark',
    forcedTheme: 'dark',
  },
  head: () => {
    const { frontMatter: meta } = useConfig();
    const { title } = meta;

    return (
      <>
        <link rel="mask-icon" href="/apple-touch-icon.png" color="#000000" />
        <link
          rel="apple-touch-icon"
          sizes="180x180"
          href="/apple-touch-icon.png"
        />
        <link
          rel="icon"
          type="image/png"
          sizes="32x32"
          href="/favicon-32x32.png"
        />
        <link
          rel="icon"
          type="image/png"
          sizes="16x16"
          href="/favicon-16x16.png"
        />
        <link rel="manifest" href="/site.webmanifest" />
        <meta name="msapplication-TileColor" content="#ffffff" />
        <meta httpEquiv="Content-Language" content="en" />
        <meta
          name="description"
          content={
            meta['description'] ||
            'The safety of Typescript with the magic of Tailwind.'
          }
        />
        <meta
          name="og:description"
          content={
            meta['description'] ||
            'The safety of Typescript with the magic of Tailwind.'
          }
        />
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:site" content="@mokshit06" />
        <meta
          name="og:image"
          content="https://typewind.dev/typewind-share.png"
        />
        <meta
          name="og:title"
          content={
            title
              ? title + ' – Typewind'
              : 'Typewid - The safety of Typescript with the magic of Tailwind.'
          }
        />
        <meta name="apple-mobile-web-app-title" content="Typewind" />
      </>
    );
  },
};

export default config;
